<template>
  <div>
    <v-card flat color="grey lighten-4" class="task"
      @mouseover="hover" @mouseleave="leave" 
      @click="completeTask">
      <img :src="imgsrc" width="100%" :style="backimg" />
      <v-card-title>
        {{title}}
      </v-card-title>
      <v-card-text>
        <v-container fluid>
          <v-row>
            <v-col cols="12" v-show="choose">
              任务描述
            </v-col>
            <v-col cols="12" v-show="!choose"
              style="padding-top:100px;">
              <v-checkbox
                dark
                label="完成"
                color="#fff"
                value="red"
                hide-details
                true-value="true"
              ></v-checkbox>
               <v-checkbox
                dark
                label="放弃"
                color="#fff"
                value="green"
                hide-details
              ></v-checkbox>
            </v-col>
          </v-row>
        </v-container>
        </v-card-text>

        <!-- <v-skeleton-loader
          class="mx-auto"
          type="card"
        ></v-skeleton-loader> -->

    </v-card>
  </div>
</template>

<script>
function rand() {
  return Math.ceil(Math.random() * 4)
}
export default {
  data() {
    return {
      choose: true,
      status: 0, // 未选择
      imgsrc: require("/cache/pictures/000" +rand()+ ".jpg"),
      blur: 3,
      unchange: false
    }
  },
  props:{
    title:{
      type:String,
      default:""
    }
  },
  computed: {
    backimg() {
      let filter = 'blur('+this.blur+'px) '
      let opa = 'brightness(' + (this.unchange?.3:.9) + ");" 
      return "filter:"+filter+opa;
    }
  },
  methods:{
    hover() {
      if(this.unchange) return
      this.choose = false
      this.blur = 2
    },
    leave() {
      if(this.unchange) return
      this.choose = true 
      this.blur = 3
    },
    completeTask() {
      this.unchange = true
      this.blur = 0
    }
  }
};
</script>
<style lang="scss" scoped>
.v-card__title{
  padding-bottom: 0;
}
.task{
  height: 300px;
  overflow:hidden;
  position: relative;

  >img{
    position: absolute;
    opacity: .9;
    top:0;
    // mix-blend-mode: darken;
    z-index: 1;
  }
  >div {
    font-weight:bold;
    position:relative;
    z-index: 9;
    color:#fff !important;
  }
}
</style>
